<template>
  <div>
    <el-table :data="rows"
              stripe
              style="width: 100%"
              size="small"
              @filter-change="filterChange"
              :highlight-current-row="true">
      <el-table-column prop="title"
                       label="标题"
                       align="center">
      </el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       column-key="status"
                       align="center"
                       :filters="status"
                       filter-placement="bottom">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{scope.row.status | getStatus}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime"
                       label="时间"
                       align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          {{scope.row.create_time | dateFormate}}
        </template>
      </el-table-column>
      <el-table-column label=""
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { ADMIN_STATUS } from "@/static/status";
import { delArticle } from "@/api/article";
const type = {
  0: "primary",
  1: "danger"
};
export default {
  props: {
    rows: Array,
    pageOpts: Object
  },
  methods: {
    async del(news) {
      await delArticle(news.id);
      this.$message({
        message: "删除成功",
        type: "success",
        center: true,
        duration: 2 * 1000
      });
      this.$emit("page-change", this.pageOpts);
    },
    edit(news) {
      // this.$emit("edit", news);
      this.$router.push({
        name: "editArticle",
        query: { id: news.id }
      });
    },
    filterChange({ status }) {
      status = status.length === 0 ? [0] : status;
      const pageOpts = { ...this.pageOpts };
      pageOpts.search.status = status.join(",");
      this.$emit("page-change", pageOpts);
    },
    getStatusType(status) {
      return type[status];
    }
  },
  filters: {
    getStatus(status) {
      return ADMIN_STATUS[status];
    }
  },
  computed: {
    status() {
      const arr = [];
      for (const item in ADMIN_STATUS) {
        arr.push({
          text: ADMIN_STATUS[item],
          value: item
        });
      }
      return arr;
    }
  }
};
</script>

